<!-- 组件说明 -->
<template>
  <div class="walletWrap">
    <goback :title="'RECORD'" :ifTransparent="false"></goback>
    <div class="container clearfix">
      <div class="top" v-if="false">
        <div class="li">
          <p>1000</p>
          <span>Withdrawing</span>
        </div>
        <div class="li">
          <p>1000</p>
          <span>Withdrawn</span>
        </div>
      </div>
      <div class="listWrap">
        <div class="filter">
          <p
            :class="current_index == index ? 'active' : ''"
            v-for="(item, index) in filterArr"
            :key="index"
            @click="tabClick(index, item)"
          >
            {{ item.title }}
          </p>
        </div>
        <div class="contentWrap">
          <div class="contentBox">
            <div class="contentList">
              <div class="li" v-for="(item, index) in orderArr" :key="index">
                <div class="line1">
                  <p>₹ {{ item.withdrawPrice }}</p>
                  <p>{{ statusFn(item.withdrawStatus) }}</p>
                </div>
                <div class="line2">
                  <p>{{ item.nickName }}（{{ item.withdrawSn }}）</p>
                  <p>{{ item.creditTime }}</p>
                </div>
              </div>
              <span v-if="!loadingStatus" class="nomore">No More</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ifLogin, utilGotoLogin } from "@/utils/index.js";
import { mapState } from "vuex";

export default {
  components: {},
  name: "percenterWalletRecord",
  data() {
    return {
      current_index: 0,
      filterArr: [
        {
          title: "ALL",
          type: ""
        },
        {
          title: "Applying",
          type: "0,1"
        },
        {
          title: "Succeed",
          type: "2"
        },
        {
          title: "Failed",
          type: "3,4"
        }
      ],
      orderArr: [],
      loadingStatus: false
    };
  },
  computed: mapState({
    // 箭头函数可使代码更简练
    userStoreData: state => state.user
  }),
  methods: {
    statusFn(status) {
      switch (status) {
        case 0:
          return "Applying";
        case 1:
          return "Waiting For Payment";
        case 2:
          return "Payment Succeed";
        case 3:
          return "Payment Failed";
        case 4:
          return "Apply Failed";
      }
    },
    tabClick(index, item) {
      this.current_index = index;
      this.orderArr = [];
      this.pageinit(item.type);
    },
    pageinit(withdrawStatus) {
      let zs = this;
      this.$toast.loading({
        message: "waiting",
        duration: 0,
        forbidClick: true
      });
      zs.loadingStatus = true;
      zs.api.userController
        .userWithdrawList({
          currPage: 1,
          pageSize: 10000,
          userId: zs.userStoreData.userId,
          withdrawStatus: withdrawStatus ? withdrawStatus : ""
        })
        .then(res => {
          zs.loadingStatus = false;
          this.$toast.clear();
          if (res.data.code === 200) {
            zs.orderArr = res.data.data.list;
          } else {
            zs.$toast(res.data.info);
          }
        });
    },
    ifLoginFn() {
      return ifLogin();
    },
    gotoLogin() {
      utilGotoLogin();
    },
    // 路有跳转
    goto(name) {
      this.$router.push({
        name
      });
    },
    fnstop() {
      return false;
    }
  },
  mounted() {
    this.pageinit();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="less" scoped>
@import url("./../../../assets/css/common.less");
@import url("./percenter-wallet-record.less");
</style>
